<?php $this->load->view('inc/header');?>

<!-- 添加 xhedit 和 uploadify 插件 ,后者是基于 jquery 的-->
<script type="text/javascript" src="<?php echo $static_url;?>xhedit/xheditor-1.1.13-zh-cn.min.js"></script>

<link href="<?php echo $static_url;?>uploadify/uploadify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="<?php echo $static_url;?>uploadify/jquery.uploadify-3.1.min.js"></script>

<div class="main-cont">
	<h2>添加产品</h2>
	
<!-- ajax 提交 ，isvalidata="true" 表示提交前进行数据验证  -->
	<form id="frm-product-add" action="admin.php?c=product&m=add_do" method="post"
		isvalidata="true"
		submitbefor="product_add_befor"
	>
		<table class="tbl-data" cellpadding="0" cellspacing="0">
			<tr>
				<th width="100">类别：</th>
				<td>
					<?php html_select($cat_select_tree,'',' name="cid" class="validate[required]" ');?>
				</td>
			</tr>
			<tr>
				<th width="100">产品名称：</th>
				<td><input class="w2 validate[required]" type="text" name="title" /></td>
			</tr>
			<tr>
				<th width="100">产品价格：</th>
				<td><input class="validate[required]" type="text" name="price" /></td>
			</tr>
			<tr>
				<th width="100">标题图片：</th>
				<td>
					<input type="file" id="uploadify" />
					
					<input id="title-img-id" name="title_img_id" type="hidden"/>
					<div id="title-img-upload-ueue">
					</div>
				</td>
			</tr>
			<tr>
				<th width="100">产品相册：</th>
				<td>
					<input type="file" id="album-uploadify" />
					
					<input id="album" name="album_ids" type="hidden"/>
					<div id="album-queue" class="album">
					</div>
				</td>
			</tr>
						<tr>
				<th>详情：</th>
				<td><textarea id="content" class="w3 h1 validate[required]" name="content"></textarea></td>
			</tr>
		</table>
		<div class="action">
			<input class="btn-ajax-submit" frmid="frm-product-add" type="button" value="保存" /> 
			<input id="btn-reset" type="reset" value="重置" />
		</div>
	</form>

</div>
<?php $this->load->view('inc/footer');?>

<!-- 需要额外添加的，同样属于展示静态页面效果的JS代码 -->
<script>
$(function(){						//是否类似$(document).ready(function(){});
	$('#btn-reset').click();		//表示单击一下。辅助完成刷新功能。
	
	$('#content').xheditor({		//给内容区域添加编辑功能。
		tools:'simple',				
		upMultiple:true,
		upImgUrl:"<?php echo site_url('c=product&m=upload');?>",	//返回的json数据自动启用。
		upImgExt:"jpg,jpeg,gif,png"
	});

	//在标题图片处，使用uploadify插件，使上传界面更友好，操作也更简便。
    $("#uploadify").uploadify({		
        height        : 20,
        swf           : '<?php echo $static_url;?>uploadify/uploadify.swf',
        uploader      : '<?php echo site_url('c=product&m=uploadify');?>',
        width         : 120 ,
        multi          : false,
        onUploadSuccess : function(file, data, response) {
        	//返回的数据赋给data变量，并 eval化。把ｊｓｏｎ数据变成对象
            var data = eval('('+data+')');
            
            $('#title-img-id').val(data.id);   //给#title-img-id节点赋值 。相当于在隐藏的文本框中赋值。
												//即给节点加了个属性 : value="data.id"
            var str_thumb = '<img src="'+data.thumb_url	+'"/>';
            //向#title-img-upload-ueue节点，添加内容 。图片就显示出来了。
            $('#title-img-upload-ueue').empty().append(str_thumb);
            
        }         
    });	
	
    $("#album-uploadify").uploadify({
        height        : 20,
        swf           : '<?php echo $static_url;?>uploadify/uploadify.swf',
        uploader      : '<?php echo site_url('c=product&m=uploadify');?>',
        width         : 120 ,
        onUploadSuccess : function(file, data, response) {
            //图像一张一张的上传，data数据也一条一条的返回。
            var data = eval('('+data+')');
			//arr_str.length表示元素个数。整体表示动态增加数组。
            var arr_str = new Array();
            arr_str[arr_str.length] = '<div class="album-item">';
            arr_str[arr_str.length] = '<div class="album-del" onclick="remove_item(this);">DEL</div>';
            arr_str[arr_str.length] = '<div class="album-img"><img src="'+data.thumb_url+'"/></div> ';
            arr_str[arr_str.length] = '<div class="album-frm"><input type="hidden" name="album[]" value="'+data.id+'"/>';
            arr_str[arr_str.length] = '描述：<input class="w2" type="text" name="dsrp[]"/>&nbsp;';
            arr_str[arr_str.length] = '排序：<input class="w4" type="ord" name="ord[]"/></div>';
            arr_str[arr_str.length] = '</div>';
			//把数组用空字符串连接起来，类似PHP中的implode.效率较高。
            var str_thumb = arr_str.join('');
            $('#album-queue').append(str_thumb);

        }         
    });	
});

//表单提交之前添加额外数据验证。
function product_add_befor($frm){

	var title_img_id = $('#title-img-id').val();

	if(Number(title_img_id)<=0){
		asyncbox.tips('请上传标题图片！','error');
		return false;
	}

	var content = $('#content').val();
	if(content.length<=0){
		asyncbox.tips('内容不能为空！','error');
		return false;
	} 
	
	return true;
}
</script>
